<!DOCTYPE html>
<html lang="zh-CN"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/img/favicon.png">

    <title>小白接口 - 在线示例</title>

    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="../css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="../css/offcanvas.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <script src="../js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
    <nav class="navbar navbar-fixed-top navbar-inverse">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">小白接口在线示例</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="http://www.okayapi.com/">首页</a></li>
            <li><a href="/sign/">签到吧</a></li>
            <li><a href="/mininote/">迷你日记</a></li>
            <li><a href="/fabiao/">发票小助手</a></li>
            <li><a href="/post/?id=2">简易专题页</a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </nav><!-- /.navbar -->

    <div class="container">

      <div class="row row-offcanvas row-offcanvas-right">

        <div class="col-xs-12 col-sm-9">
          <p class="pull-right visible-xs">
            <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
          </p>
          <div class="well">
            <h1>小白接口，一学就会！</h1>
            <ul>
                <li>本页面示例基于Vue.js + Bootstrap开发，为了更好地体验示例效果，推荐使用最新浏览器进行访问。</li>
                <li>其他客户端，诸如C#、Android、iOS、Python等，接口用法类似。</li>
                <li>小白后台体验账号为：api_demo / 123456</li>
            </ul>
            <a href="https://gitee.com/dogstar/okayapi-demo" target="_blank" class="btn btn-info" >下载全部源代码</a>
            <a href="http://admin.okayapi.com/" target="_blank" class="btn btn-default" >进入小白后台</a>
          </div>

          <!-- 头像 (START) -->
          <div class="row" id="avatar" >
            <div class="col-xs-12 col-lg-12">
              <h2>用户头像</h2>
            <h3>随机用户头像</h3>
            <p>根据昵称，生成一个默认的用户头像。</p>
            <ul>
                <li>用到的接口：<a href="http://api.okayapi.com/docs.php?service=Ext.Avatar.Show&detail=1&type=fold" target="_blank">随机用户头像</a></li>
            </ul>
            <hr />

              <img src="http://api.okayapi.com/?s=Ext.Avatar.Show&nickname=白&size=150" />
              <img src="http://api.okayapi.com/?s=Ext.Avatar.Show&nickname=白&size=120" />
              <img src="http://api.okayapi.com/?s=Ext.Avatar.Show&nickname=白&size=100" />
              <img src="http://api.okayapi.com/?s=Ext.Avatar.Show&nickname=白&size=80" />
              <img src="http://api.okayapi.com/?s=Ext.Avatar.Show&nickname=白&size=50" />
              <img src="http://api.okayapi.com/?s=Ext.Avatar.Show&nickname=白&size=25" />
              <br />
              <br />

              <div class="alert alert-success" role="alert">
                  <strong>划重点！</strong> 生成二维码接口，不需要签名，可直接使用。直接显示头像图片。
              </div>
          </div>
         </div>
         <!-- 头像 (END) -->

          <!-- 在线留言（开始） -->
          <div class="row" id="appComments" >
            <div class="col-xs-12 col-lg-12">
              <h2>集合数据</h2>

              <h3>最新留言</h3>
              <p>显示最近10条留言。</p>
              <ul>
                  <li>用到的接口：<a href="http://api.okayapi.com/docs.php?service=App.Main_Set.GetList&detail=1&type=fold" target="_blank">获取集合列表（App.Main_Set.GetList）</a></li>
              </ul>
              <hr />

              <table class="table table-hover">
              <thead>
                <tr>
                  <th>时间</th>
                  <th>留言内容</th>
                  <th>昵称</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="comment_item in comment_list">
                  <td><font color="gray">{{ comment_item.add_time }}</font></td>
                  <td>{{ comment_item.data.comment_content }}</td>
                  <td>@{{ comment_item.data.comment_username }}</td>
                </tr>
              </tbody>
              </table>
              
              <page></page>
              
              <div class="alert alert-success" role="alert">
                  <strong>划重点！</strong> 一对多关系的数据，可以使用集合数据。如果集合数据与用户有关，则使用<a href="http://www.okayapi.com/docs/#/v2.0/user_set" target="_blank">用户集合数据（App.User_Set.*）</a>；如果与用户无关，则可使用<a href="http://www.okayapi.com/docs/#/v2.0/main_set" target="_blank" >应用集合数据（App.Main_Set.*）</a>。
              </div>
            </div>

            <script type="text/x-template" id="page">
                <ul class="pagination" >
                    <li v-show="current != 1" @click="current-- && goto(current)" ><a href="#">上一页</a></li>
                    <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
                      <a href="#" >{{index}}</a>
                    </li>
                    <li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)"><a href="#" >下一页</a></li>
                </ul>
            </script>


            <div class="col-xs-12 col-lg-12" data-example-id="basic-forms">
                <h3>我要留言</h3>
                <p>游客可自由留言评论。</p>
              <ul>
                  <li>用到的接口：<a href="http://api.okayapi.com/docs.php?service=App.Main_Set.Add&detail=1&type=fold" target="_blank">添加元素（App.Main_Set.Add）</a></li>
              </ul>
              <hr />

              <form class="form-horizontal">
                <div class="form-group">
                  <label for="input_comment_user" class="col-sm-2 control-label">您的昵称</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="input_comment_user" v-model="new_comment_username" placeholder="">
                  </div>
                </div>
                <div class="form-group">
                  <label for="input_comment_content" class="col-sm-2 control-label">留言内容</label>
                  <div class="col-sm-10">
                    <textarea class="form-control" rows="3" v-model="new_comment_content" id="input_comment_content" placeholder="亲，请文明留言哦~"></textarea>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-offset-2 col-sm-10">
                    <a v-on:click="addComment" class="btn btn-success" href="javascript:void(0)">发表留言</a>
                    <span>{{ tips }}</span>
                  </div>
                </div>
              </form>
              
              <div class="alert alert-success" role="alert">
                  <strong>划重点！</strong> 集合数据内的元素，可以放置任意常用类型的数据。客户端应用可以根据自己的业务需要，设计字段和结构，并通过<a href="http://admin.okayapi.com/?r=Data/MainSetList" target="_blank">小白后台</a>进行在线可视化管理。
              </div>
            </div>


          </div>
          <!-- 在线留言（结束） -->

         <!-- 网站访问简单统计 (START) -->
         <div class="row" id="webVisitStat" >
           <div class="col-xs-12 col-lg-12">
             <h2>计数器</h2>
           <h3>网站访问简单统计</h3>
           <p>使用计数器，可以实现每日、每周、每月、每年、永久性的计数功能。</p>
           <ul>
               <li>用到的接口：<a href="http://api.okayapi.com/docs.php?service=App.Main_Counter.Setup&detail=1&type=fold" target="_blank">设定计数器（App.Main_Counter.Setup）、<a href="http://api.okayapi.com/docs.php?service=App.Main_Counter.Update&detail=1&type=fold" target="_blank">增量更新计数器（App.Main_Counter.Update）</a></li>
           </ul>
           <hr />

           <div class="row" style="text-align: center;">
               <div class="col-xs-6 col-sm-3 placeholder">
                   <img class="img-circle" src="" alt="Generic placeholder image" width="140" height="140">
                   <h2>{{ day_visit_times }}</h2>
                   <p>日访问次数</p>
               </div>
               <div class="col-xs-6 col-sm-3 placeholder">
                   <img class="img-circle" src="" alt="Generic placeholder image" width="140" height="140">
                   <h2>{{ month_visit_times }}</h2>
                   <p>月访问次数</p>
               </div>
               <div class="col-xs-6 col-sm-3 placeholder">
                   <img class="img-circle" src="" alt="Generic placeholder image" width="140" height="140">
                   <h2>{{ all_visit_times }}</h2>
                   <p>总访问次数</p>
               </div>
           </div>
              
              <div class="alert alert-success" role="alert">
                  <strong>划重点！</strong> 如果需要与用户绑定，例如用户每天投票的次数、游戏中玩家每个月的积分等，则可以使用<a href="http://www.okayapi.com/docs/#/v2.0/user_counter" target="_blank">用户计数器（App.User_Counter.*）</a>
              </div>

           </div>
         </div>
         <!-- 网站访问简单统计 (END) -->

          <!-- 二维码 (START) -->
          <div class="row" id="qrCode" >
            <div class="col-xs-12 col-lg-12">
              <h2>二维码</h2>
            <h3>生成二维码</h3>
            <p>根据文本内容，生成二维码图片。</p>
            <ul>
                <li>用到的接口：<a href="http://api.okayapi.com/docs.php?service=Ext.QrCode.Png&detail=1&type=fold" target="_blank">根据文本内容，生成二维码（Ext.QrCode.Png）</a></li>
            </ul>
            <hr />

              <form class="form-horizontal">
                <div class="form-group">
                  <label for="input_qrcode_str" class="col-sm-2 control-label">二维码文本内容</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="input_qrcode_str" placeholder="" value="OkayApi" >
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-offset-2 col-sm-10">
                    <a type="submit" class="btn btn-success" href="javascript:void(0)" onclick="createQrCode()" >生成二维码</a>
                  </div>
                </div>
              </form>

              <img src="http://api.okayapi.com/?s=Ext.QrCode.Png&data=OkayApi&size=10" id="qrcode_img" />
              
              <div class="alert alert-success" role="alert">
                  <strong>划重点！</strong> 生成二维码接口，不需要签名，可直接使用。接口链接相当于图片链接，可直接显示二维码图片。
              </div>
            </div>
         </div>
         <!-- 二维码 (END) -->

          <!-- 条形码 (START) -->
          <div class="row" id="barCode" >
            <div class="col-xs-12 col-lg-12">
              <h2>条形码</h2>
            <h3>生成条形码</h3>
            <p>根据文本内容，生成条形码图片。</p>
            <ul>
                <li>用到的接口：<a href="http://api.okayapi.com/docs.php?service=Ext.BarCode.Gen&detail=1&type=fold" target="_blank">根据内容，生成条形码（Ext.BarCode.Gen）</a></li>
            </ul>
            <hr />

              <form class="form-horizontal">
                <div class="form-group">
                  <label for="input_barcode_str" class="col-sm-2 control-label">条形码</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="input_barcode_str" placeholder="" value="123456789" >
                  </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label"></label>
                  <div class="col-sm-10">
                    <img src="http://api.okayapi.com/?s=Ext.BarCode.Gen&check_sum=123456789&" id="barcode_img" />
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-offset-2 col-sm-10">
                    <a type="submit" class="btn btn-success" href="javascript:void(0)" onclick="createBarCode()" >生成条形码</a>
                  </div>
                </div>
              </form>
              
              <div class="alert alert-success" role="alert">
                  <strong>划重点！</strong> 生成条形码接口，不需要签名，可直接使用。接口链接相当于图片链接，可直接显示条形码图片。
              </div>
            </div>
         </div>
         <!-- 条形码 (END) -->

         <!-- 验证码 (START) -->
         <div class="row" id="verifyCode" >
           <div class="col-xs-12 col-lg-12">
             <h2>验证码</h2>
           <h3>显示验证码、核对验证码</h3>
           <p>根据小白后台的配置，显示相应的验证码图片。并且可以对用户输入的验证码进行校验。</p>
           <ul>
               <li>用到的接口：<a href="http://api.okayapi.com/docs.php?service=App.Captcha.Create&detail=1&type=fold" target="_blank">创建新的验证码（App.Captcha.Create）、<a href="http://api.okayapi.com/docs.php?service=App.Captcha.Verify&detail=1&type=fold" target="_blank">校对验证码（App.Captcha.Verify）</a></li>
           </ul>
           <hr />

             <form class="form-horizontal">
               <div class="form-group">
                 <label for="input_verifycode_str" class="col-sm-2 control-label">验证码</label>
                 <div class="col-sm-10">
                   <input type="text" class="form-control" id="input_verifycode_str" placeholder="请输入以下显示的验证码" value="" >
                 </div>
               </div>
               <div class="form-group">
                 <label  class="col-sm-2 control-label"></label>
                 <div class="col-sm-10">
                    <img src="" id="verifycode_img" width="150" height="40">
                 </div>
               </div>
               <div class="form-group">
                 <div class="col-sm-offset-2 col-sm-10">
                   <a type="submit" class="btn btn-success" href="javascript:void(0)" onclick="verifyCaptcha()" >校对验证码</a>
                   <a href="javascript:void(0)" onclick="createCaptcha()">刷新验证码</a>
                 </div>
               </div>
             </form>
              
              <div class="alert alert-success" role="alert">
                  <strong>划重点！</strong> 验证码需要先生成，再核对。生成时，注意保留captcha_id，以便在核对时回传给服务端。更高级的配置，可进行小白后台设置。
              </div>

           </div>
           </div>
         <!-- 验证码 (END) -->

      </div> <!-- 全部示例 END -->

        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
          <div class="list-group">
            <a href="#avatar" class="list-group-item">用户头像</a>
            <a href="#appComments" class="list-group-item">集合数据</a>
            <a href="#webVisitStat" class="list-group-item">计数器</a>
            <a href="#qrCode" class="list-group-item">二维码</a>
            <a href="#barCode" class="list-group-item">条形码</a>
            <a href="#verifyCode" class="list-group-item">验证码</a>
          </div>
        </div><!--/.sidebar-offcanvas-->
      </div><!--/row-->

      <hr>

      <footer>
        <p>© 2017-2018 小白接口 OkayApi.COM All Rights Reserved.</p>
      </footer>

    </div><!--/.container-->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script src="../js/ie10-viewport-bug-workaround.js"></script>
    <script src="../js/offcanvas.js"></script>
    <script src="../js/vue.js"></script>
  
    <!-- 在线留言 -->
    <script src="./comments.js" ></script>
    <!-- 网站统计 -->
    <script src="./webstat.js" ></script>
    <!-- 二维码 -->
    <script src="./qrcode.js" ></script>
    <!-- 条形码 -->
    <script src="./barcode.js" ></script>
    <!-- 验证码 -->
    <script src="./verifycode.js" ></script>

</body>
</html>
